<template>
    <!-- 网络问诊 -->
    <div class="online-inquiry layout-media-box">
        <div class="l-panel" v-if="activeList == 1">
            <div class="inqiry-tab">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane v-for="(item, index) in userTabList" :key="index" :label="item.label" :name="item.name">
                        <div v-if="activeName != 'messageCenter'">
                            <el-form :inline="true" class="demo-form-inline" size="small">
                                <template v-if="activeName == 'prescriptionTable'">
                                    <el-form-item label="审核状态">
                                        <el-select v-model="userQueryList.prescriptionState" placeholder="请选择">
                                            <el-option label="全部" value=""></el-option>
                                            <el-option label="审核通过" value="1"></el-option>
                                            <el-option label="审核驳回" value="2"></el-option>
                                            <el-option label="审核中" value="3"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="处方类型">
                                        <el-select v-model="userQueryList.prescriptionType" placeholder="请选择">
                                            <el-option label="全部" value=""></el-option>
                                            <el-option label="中药" value="1"></el-option>
                                            <el-option label="西药" value="2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </template>
                                <template v-else>
                                    <el-form-item label="联系电话">
                                        <el-input v-model="userQueryList.patientPhone" placeholder="患者电话"></el-input>
                                    </el-form-item>
                                </template>
                                <el-form-item label="姓名">
                                    <el-input v-model="userQueryList.patientName" placeholder="患者姓名"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <!-- <el-date-picker size="small" v-model="userQueryList.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                                    </el-date-picker> -->
                                    <el-date-picker size="small" v-model="userQueryList.time" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item>
                                    <el-button @click="onClearQuery">重置</el-button>
                                    <el-button type="primary" @click="onQuery">查询</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-tab-pane>
                    <component :ref="activeName" :is="activeName" :queryList="userQueryList"></component>
                </el-tabs>
            </div>
        </div>
        <div v-else class="doctor-tab">
            <div class="l-panel">
                <ul>
                    <li :class="activeName == item.name ? 'active' : ''" v-for="(item, index) in doctorTabList" :key="index" @click="doctorTab(item.name)">{{item.label}}</li>
                </ul>
            </div>
            <component :is="activeName"></component>
        </div>
    </div>
</template>
<script>
import checkTable from './userinquiry/check-table'
import healthGuidanceTable from './userinquiry/health-guidance-table'
import inpatientSuggestTable from './userinquiry/inpatient-suggest-table'
import prescriptionTable from './userinquiry/prescription-table'
import networkInquiry from './doctorinquiry/network-inquiry'
import myUser from './doctorinquiry/my-user'
import messageCenter from './doctorinquiry/message-center'
import caseManagement from './doctorinquiry/case-management'
import workingSchedule from './doctorinquiry/working-schedule'
import requsetNote from '@/views/inquiry/doctorinquiry/casetable/request-note'
export default {
    components: {
        checkTable,
        healthGuidanceTable,
        inpatientSuggestTable,
        prescriptionTable,
        networkInquiry,
        myUser,
        messageCenter,
        caseManagement,
        workingSchedule,
        requsetNote
    },
    data() {
        return {
            activeName: '',
            userTabList: [
                {
                    label: '处方历史',
                    name: 'prescriptionTable'
                }, {
                    label: '检验检查',
                    name: 'checkTable'
                }, {
                    label: '检验检查申请单',
                    name: 'requsetNote'
                }, {
                    label: '健康指导建议单',
                    name: 'healthGuidanceTable'
                }, {
                    label: '住院建议',
                    name: 'inpatientSuggestTable'
                }, {
                    label: '消息中心',
                    name: 'messageCenter'
                },
            ],
            doctorTabList: [
                {
                    label: '网络问诊',
                    name: 'networkInquiry'
                }, {
                    label: '我的用户',
                    name: 'myUser'
                }, {
                    label: '消息中心',
                    name: 'messageCenter'
                }, {
                    label: '病例管理',
                    name: 'caseManagement'
                }, {
                    label: '值班计划',
                    name: 'workingSchedule'
                }
            ],
            input: '',
            value: '',
            activeList: 1, // 0=医生，1=用户
            userQueryList: {
                patientName: '',
                patientPhone: '',
                time: [],
                prescriptionType: '',
                prescriptionState: ''
            }
        }
    },
    methods: {
        init() {
            if (this.$authInfo.getAuthType() == 'D') {
                this.activeList = 0;
                this.activeName = 'networkInquiry';
            } else {
                this.activeList = 1;
                this.activeName = 'prescriptionTable';
            }

            if (this.$route.query && this.$route.query.activeName) {
                this.activeName = this.$route.query.activeName;

                this.$router.push({
                    query: {}
                })
            }
        },
        handleClick(tab, event) {
            // console.log(tab, event);
            for (let key in this.userQueryList) { //切换tab清空搜索
                if (key == 'time') {
                    this.userQueryList[key] = []
                } else {
                    this.userQueryList[key] = ''
                }
            }
        },
        onClearQuery() {

            Object.keys(this.userQueryList).forEach(key => {
                if (key == 'time') {
                    console.log(this.userQueryList, '+++++++++++++++userQueryList+++++++++')
                    return this.userQueryList[key] = [];
                } else {
                    return this.userQueryList[key] = '';
                }
            })

            this.onQuery();
        },
        onQuery() {
            //查询
            this.$nextTick(() => {
                // console.log(this.activeName, this.$refs[this.activeName])
                this.$refs[this.activeName].queryData();
            })
        },
        doctorTab(name) {
            this.activeName = name;
        }
    },
    watch: {
        $route(to, from) {
            // console.log(to.path, to.query)
            if (to.path == '/inquiry' && to.query.activeName) {
                this.activeName = to.query.activeName;

                this.$router.push({
                    query: {}
                })
            }
        }
    },
    mounted() {
        this.init();
    }

};
</script>
<style lang="scss" scoped>
.online-inquiry {
    .l-panel {
        width: 100%;
    }
}
.inqiry-tab {
    padding: 30px;
    /deep/ .el-form-item--small.el-form-item {
        margin-right: 20px;
        /deep/ .el-select {
            width: 110px;
        }
    }
}
.doctor-tab {
    > div {
        margin-bottom: 20px;
    }
    ul {
        display: flex;
        padding: 0 30px;
        li {
            color: #535353;
            font-size: 16px;
            margin-right: 80px;
            cursor: pointer;
            padding: 30px 0;
        }
    }
    .active {
        color: #006db8;
        position: relative;
        &::after {
            position: absolute;
            content: "";
            width: 28px;
            height: 3px;
            background: #006db8;
            bottom: 0;
            right: 15px;
        }
    }
}
</style>
